<script setup lang="ts">
import useStore from '@/store/index'
import {AqiTrendStatisticDto} from "@/ts/entityTypes.ts";
import {onMounted, reactive} from "vue";
import {getAqiTrendStatisticsApi} from "@/api/statisticsApi.ts";
import {ElMessage} from "element-plus";

const store = useStore()
store.homeTitle = 'AQI指数趋势统计'

let tableData = reactive<Array<AqiTrendStatisticDto>>([])

const initData = async () => {
  let res = await getAqiTrendStatisticsApi().catch((err) => {
    ElMessage.error(err)
  })
  if (res?.data.code == 200) {
    tableData.splice(0, tableData.length)
    tableData.push(...res.data.data)
  } else {
    ElMessage.error(res?.data.msg)
  }
}

onMounted(async () => {
  await initData()
})
</script>

<template>
  <div class="main-box">
    <div class="title-box">
      <h4 style="color: white">AQI指数趋势统计</h4>
    </div>
    <el-table style="width: 90%" :data="tableData">
      <el-table-column label="序号" prop="id"></el-table-column>
      <el-table-column label="月份" prop="date"></el-table-column>
      <el-table-column label="AQI空气质量指标超标数量" prop="aqiExceedNum"></el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
@import "../css/main-components.css";
</style>
